<template>
  <!-- 订单评论审核 -->
  <div>
    <!-- 头部查询参数操作 -->
    <el-row :gutter="15">
      <el-col :span="4"
        ><el-input
          v-model="params.content"
          placeholder="请输入关键字"
          clearable
      /></el-col>
      <!-- 输入订单编号没反应是后台没写好 -->
      <el-col :span="4"
        ><el-input
          v-model="params.orderId"
          placeholder="请输入订单编号"
          clearable
          @clear="params.orderId = null"
      /></el-col>
      <el-col :span="4">
        <el-select
          v-model="params.status"
          clearable
          placeholder="请选择状态"
          @clear="params.status = null"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        header-align="center"
      />
      <el-table-column
        prop="content"
        label="评论内容"
        align="center"
        header-align="center"
      />
      <el-table-column
        prop="customerId"
        label="顾客编号"
        align="center"
        header-align="center"
      />
      <el-table-column
        prop="orderId"
        label="订单编号"
        align="center"
        header-align="center"
      />
      <el-table-column
        prop="commentTime"
        label="评论时间"
        align="center"
        header-align="center"
        :formatter="fmtTableDateDay"
      />
      <el-table-column
        prop="status"
        label="评论状态"
        align="center"
        header-align="center"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.status === '通过'" type="success"
            >通过</el-tag
          >
          <el-tag v-else-if="scope.row.status === '不通过'" type="danger"
            >不通过</el-tag
          >
          <el-tag v-else type="info">未审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #e6a23c"
            @click="deleteRow(scope.row.id)"
            >删除</el-button
          >
          <span v-if="scope.row.status === '未审核'">
            <el-button type="text" @click="passComment(scope.row.id)"
              >通过</el-button
            >
            <el-button
              style="color: #f56c6c"
              type="text"
              @click="noPassComment(scope.row.id)"
              >不通过</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 底部分页 -->
    <el-pagination
      class="pagination_right"
      :current-page="params.page"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import {
  pageQuery,
  checkPass,
  checkNoPass,
  deleteById,
} from "@/api/orderComment";
import { fmtTableDateDay } from "@/filters/index";
export default {
  data() {
    return {
      // 时间格式
      fmtTableDateDay,
      // 查询参数
      params: {
        page: 1,
        pageSize: 10,
        content: null,
        status: null,
        orderId: null,
      },
      // 表格里的数据
      tableData: [],
      // 表格数据总数
      total: 0,
      // 审核的状态（三种）
      options: [
        {
          id: 0,
          value: "未审核",
        },
        {
          id: 1,
          value: "通过",
        },
        {
          id: 2,
          value: "不通过",
        },
      ],
    };
  },
  computed: {},
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    // 获取数据
    async getData() {
      const res = await pageQuery({ ...this.params });
      // console.log(res)
      if (res.status !== 200) return this.$message.error("数据获取失败");
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 改变页面数据数量大小
    handleSizeChange(newPageSize) {
      this.params.pageSize = newPageSize;
      this.getData();
    },
    // 改变当前页码
    handleCurrentChange(newPage) {
      this.params.page = newPage;
      this.getData();
    },
    // 点击通过
    async passComment(id) {
      const res = await checkPass({ id: id });
      if (res.status !== 200) return this.$message.error("更新失败");
      this.getData();
    },
    // 点击不通过
    async noPassComment(id) {
      const res = await checkNoPass({ id: id });
      if (res.status !== 200) return this.$message.error("更新失败");
      this.getData();
    },
    // 点击删除操作
    deleteRow(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await deleteById({ id: id });
        // console.log(res);
        if (res.status === 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getData();
        } else {
          this.$message({
            type: "danger",
            message: "删除失败!",
          });
        }
      });
    },
    // 点击查询操作
    searchData() {
      // console.log(this.params);
      this.getData();
    },
  },
};
</script>
<style scoped lang="scss">
.el-table {
  margin-top: 6px;
}
//
.pagination_right {
  float: right;
  margin-top: 8px;
}
</style>
